<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta name="referrer" content="never">
		<script src="js/preloadjs.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/rank.css"/>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
				list-style: none;
			}
			html,body{
				width: 100%;
				height: 100%;
			}
			.web{
				width: 100%;
				height: 100%;
				background: url(img/beij.png);
				background-size: 100% 100%;
				display: none;
			}
			.jianpai{
				width: 125px;
				overflow: hidden;
				margin-left: 40px;
				float: left;
			}
			.jianpai img{
				width: 100%;
			}
			.wenhao{
				float: right;
				margin-top: 100px;
				overflow: hidden;
				margin-right: 30px;
			}
			
			.wenhao img{
				width: 27px;
				height: 48px;
			}
			.clear{
				clear: both;
			}
			.it{
				margin: 0 auto;
				width: 370px;
				margin-top: 20px;
				margin-left: 12px;
				position: relative;
			}
			.it li{
				display: inline-block;
				border: 7px solid #dcdcdc;
				background: white;
				width: 99px;
				height: 99px;
				margin-left: 1px;
				vertical-align: top;
				margin-bottom: 5px;
			}
			.item img{
				height: 100%;
				margin-top: -25px;
				padding-left: 9px;
			}
			.item p{
				font-size: 12px;
				padding-left: 9px;
				font-weight: bold;
			}
			.item:nth-child(2) img{
				height: 90%;
				margin-top: -16px;
			}
			.item:nth-child(3) img{
				height: 85%;
				margin-top: -12px;
			}
			.btn{
				border: 0;
				width: 113px;
				height: 99px;
				position: relative;
				cursor: pointer;
			}
			.btn img{
				width: 100%;
			}
			.btn p{
				position: absolute;
				font-size: 38px;
				top: 0px;
				padding: 6px 5px 5px 17px;
				color: #ff4c23;
				font-weight: bold;
			}
			.item2 img{
				height: 55%;
				margin: 14px 0 0 3px ;
			}
			.item2 p{
				font-size: 12px;
				padding-left: 9px;
				font-weight: bold;
			}
			.item2:nth-child(6) img{
				height: 72%;
				margin: 4px 0 0 0px ;
			}
			.item2:nth-child(7) img{
				height: 56%;
				margin: 6px 0 0 15px ;
			}
			.item2:nth-child(8) img{
				height: 50%;
				margin: 14px 0 0 9px;
			}
			.tank:nth-child(4){
				position: absolute;
				right: 19px;
				top: 118px;
			}
			.tank:nth-child(4) p{
				font-size: 30px;
				text-align: center;
				padding: 5px;
				color: gray;
				font-weight: bold;
			}
			.item2:nth-child(5){
				position: absolute;
				right: 19px;
				top: 237px;
			}
			.item2:nth-child(5) img{
				height: 70%;
				margin: 4px 0 0 20px;
			}
			.item2:nth-child(6){
				position: absolute;
				left: 119px;
				top: 237px;
			}
			.item2:nth-child(6) img{
				height: 40%;
				margin: 4px 0 0 20px;
			}
			.item2:nth-child(7){
				position: absolute;
				left: 0;
				top: 237px;
			}
			.bg{
				border: 7px solid #ff9f34;
			}
			.bg2{
				border: 7px solid #ff9f34;
				background: #fff531;
				transform: scale(1.2);
			}
			.tuic{
				width: 50px;
				height: 50px;
				overflow: hidden;
				position: absolute;
				top: 580px;
				right: 25px;
			}
			.tuic img{
				width: 100%;
			}
		</style>
	</head>
	<body>
		<div class="web">
			<div class="jianpai"><img src="img/jp.png"/></div>
			<div class="wenhao">
				<img src="img/wenhao.png"/>
				<img src="img/wenhao.png"/>
				<img src="img/wenhao.png"/>
				<img src="img/wenhao.png"/>
			</div>
			<div class="clear"></div>
			<ul class="it">
				<li class="item"><img src="img/bb.png"/><p>奥利帝克户外包</p></li>
				<li class="item"><img src="img/yf.png"/><p>迪卡侬透气T恤</p></li>
				<li class="item"><img src="img/bz.png"/><p>乐扣运动水壶</p></li>
				<li class="tank"><p>谢谢</p><p>参与</p></li>
				<li class="item2"><img src="img/maoj.png"/><p>迪卡侬运动毛巾</p></li>
				<li class="item2"><img src="img/yb.png"/><p>多功能运动腰包</p></li>
				<li class="item2"><img src="img/yao.png"/><p>安联运动意外保障计划（7天）</p></li>
				<li class="item2"><img src="img/sh.png"/><p>小米运动手环</p></li>
				<li class="btn"><img src="img/bg2.png"/><p>点击抽奖</p></li>
			</ul>
			<div class="tuic"><img src="img/cc.png"/></div>
		</div>
		<div class="rank">
			<div class="ren">
				<div class="ren-img">
					<img src="img/ren.png"/>
				</div>
				<p>Amy</p>
			</div>
			<div class="medal">
				<div class="medal-pai">
					<img src="img/jp.png"/>
				</div>
				<div class="wenh"><img src="img/wenhao.png"/></div>
			</div>
			<div class="time">
				<p>Time</p>
				<span>25.00</span>
			</div>
			<div class="bang">
				<div class="top">指尖自由泳全国前10排行榜</div>
				<ul class="item4">
					<li>
						<i>1</i>
						<div class="rts">
							<img src="img/ren.png"/>
							<span>Amy</span>
							<div class="rt">
								<p>item</p>	
								<em>10.00</em>
							</div>
						</div>
					</li>
					<li>
						<i>2</i>
						<div class="rts">
							<img src="img/ren.png"/>
							<span>Amy</span>
							<div class="rt">
								<p>item</p>	
								<em>10.00</em>
							</div>
						</div>
					</li>
					<li>
						<i>3</i>
						<div class="rts">
							<img src="img/ren.png"/>
							<span>Amy</span>
							<div class="rt">
								<p>item</p>	
								<em>10.00</em>
							</div>
						</div>
					</li>
					<li>
						<i>4</i>
						<div class="rts">
							<img src="img/ren.png"/>
							<span>Amy</span>
							<div class="rt">
								<p>item</p>	
								<em>10.00</em>
							</div>
						</div>
					</li>
					<li>
						<i>5</i>
						<div class="rts">
							<img src="img/ren.png"/>
							<span>Amy</span>
							<div class="rt">
								<p>item</p>	
								<em>10.00</em>
							</div>
						</div>
					</li>
					<li>
						<i>6</i>
						<div class="rts">
							<img src="img/ren.png"/>
							<span>Amy</span>
							<div class="rt">
								<p>item</p>	
								<em>10.00</em>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="anniu">
				<div class="anniu-lt">
					<img src="img/beijin2.png" alt="" />
					<i>晒战绩</i>
				</div>
				<div class="anniu-rt">
					<img src="img/beijin3.png" alt="" />
					<i>前往领奖台抽奖</i>
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var btn = document.querySelector(".btn");
			var li = document.querySelectorAll("li");
			var wenhao = document.querySelector(".wenhao");
			var tuichu = document.querySelector(".tuic img");
			var web = document.querySelector(".web");
			var naniu = document.querySelector(".anniu-rt");
			var rank = document.querySelector(".rank");
			var quan = 0; 
			btn.addEventListener("click",function(){
				var num1 = [0,1,3,2,3,4,3,5,3,6,7,3,3,3,3,3,3];
				var num2 = ["奥利帝克户外包","迪卡侬透气T恤","乐扣运动水壶","谢谢参与","迪卡侬运动毛巾","多功能运动腰包","安联运动意外保障计划","小米运动手环"];
				var num = num1[Math.floor(Math.random()*num1.length)];
				var cunt = 0;
					var timer = setInterval(function(){
						for(var i=0;i<li.length;i++) {
							li[i].classList.remove("bg2");
						}
						
						li[cunt].classList.add("bg2");
						wenhao.innerText = num2[cunt%8];
						if(cunt == num1[num] && quan>=32) {
							quan = 0
							clearInterval(timer);
						}
						quan++
						cunt++;
						if(cunt>7){cunt=0}
					},100)
			})
			tuichu.addEventListener("click",function(){
				web.style.display = "none";
			})
			
			
			naniu.addEventListener("click",function(){
				rank.style.display = "none";
				web.style.display = "block";
			})
			
			//排行榜
			var Url = "https://easy-mock.com/mock/5b712abe3ec6e13ce517da93/Ranking/rankingList?";
			var xhr = new XMLHttpRequest();
			xhr.open("GET",Url+"name=ccc&grade=123&headIm=img/ren.png");
			xhr.send(null);
			xhr.addEventListener("readystatechange",function(){
				if(xhr.readyState == 4){
					if(xhr.status == 200){
						var res = JSON.parse(xhr.responseText);
						console.log(res);
					}
				}
				
			})
		</script>	
	</body>
</html>
